<template>
  <jc-bar
    prve-btn
    @prve="
      () => {
        router.go(-1);
      }
    "
  >
    <v-spacer></v-spacer>

    <v-btn type="primary" size="small" @click="openBottomList()">
      <v-icon size="20" color="#4ade80" class="mr-1">MdiMusic</v-icon>
      <span class="text-[#4ade80]">默想音乐</span>
    </v-btn>
    <v-btn type="primary" size="small" @click="toogleDrawer(!drawer)">
      <v-icon size="20" color="#fbbf24" class="mr-1">呼吸菜单</v-icon>
      <span class="text-[#fbbf24]">呼吸菜单 </span>
    </v-btn>
  </jc-bar>
  <div class="h-full w-full max-w-[560px] mx-auto overflow-auto">
    <div class="w-full flex justify-between items-center px-4 py-2">
      <div class="flex flex-col justify-center items-center">
        <div class="text-sm font-bold">呼吸次数</div>
        <div class="text-center text-green-400">{{ starRef.count }}</div>
      </div>
      <div class="flex flex-col justify-center items-center">
        <div class="text-sm font-bold">呼吸时长</div>
        <div class="text-center text-green-400">{{ formatted }}</div>
      </div>
    </div>
    <HuXiBall
      :isPlay="isPlay"
      :huxiConfig="huxiConfig"
      @next="nextText"
      @on-repeat="onRepeat"
      @on-start="onStart"
      :isRenSheng="isRenSheng"
    ></HuXiBall>

    <div class="w-full h-[120px]">
      <MoXiangText :is-play="isPlay" ref="moXiangTextRef" :wordId="starRef.wordId"></MoXiangText>
    </div>
    <div class="w-full box-border">
      <div>
        <v-slider
          :color="getStatusColor(BreatheEnum.absorb)"
          v-model="huxiConfig.absorbDuration"
          :min="1"
          :max="10"
          :step="1"
        >
          <template v-slot:prepend>
            <div class="text-lg">吸气时长</div>
          </template>
          <template v-slot:append>
            <div class="text-lg font-bold">{{ huxiConfig.absorbDuration }}</div>
          </template>
        </v-slider>
      </div>
      <div>
        <v-slider
          :color="getStatusColor(BreatheEnum.stop)"
          v-model="huxiConfig.stopDuration"
          :min="1"
          :max="10"
          :step="1"
        >
          <template v-slot:prepend>
            <div class="text-lg">压气时长</div>
          </template>
          <template v-slot:append>
            <div class="text-lg font-bold">{{ huxiConfig.stopDuration }}</div>
          </template>
        </v-slider>
      </div>
      <div>
        <v-slider
          :color="getStatusColor(BreatheEnum.reset)"
          v-model="huxiConfig.resetDuration"
          :min="1"
          :max="10"
          :step="1"
        >
          <template v-slot:prepend>
            <div class="text-lg">呼气时长</div>
          </template>
          <template v-slot:append>
            <div class="text-lg font-bold">{{ huxiConfig.resetDuration }}</div>
          </template>
        </v-slider>
      </div>
      <div class="w-full flex justify-center flex-col items-center gap-y-2 mb-4">
        <v-icon :size="54" v-if="isPlay" @click="togglePlay(false)">MdiPauseCircle</v-icon>
        <v-icon :size="54" v-else @click="togglePlay(true)">MdiPlayCircle</v-icon>
        <v-btn color="primary" size="small" @click="toggleRenSheng(!isRenSheng)" variant="tonal">
          <span>{{ isRenSheng ? "关闭人声" : "打开人声" }}</span>
        </v-btn>
      </div>
      <div class="w-full flex justify-center">
        <v-btn @click="setQingCheng(huxiConfig)" variant="plain">
          <v-icon>清晨</v-icon>
          清晨时间</v-btn
        >
        <v-btn @click="setBaiTian(huxiConfig)" variant="plain"> <v-icon>白天</v-icon>白天时间</v-btn>
        <v-btn @click="setYeWan(huxiConfig)" variant="plain"> <v-icon>夜晚</v-icon>夜晚时间</v-btn>
      </div>
      <div class="h-[64px]"></div>
    </div>
  </div>
  <ShuLingMenuDrawer v-model:drawer="drawer" v-model:wordId="starRef.wordId"></ShuLingMenuDrawer>
  <BootomList ref="bottomListRef" @bootomlistclick="handlerBootomListClick"></BootomList>
</template>
<script lang="ts">
import HuXiBall from "./components/HuXiBall.vue";
import MoXiangText from "./components/MoXiangText.vue";
import VIcon from "@/icon/VIcon.vue";
import ShuLingMenuDrawer from "./components/ShuLingMenuDrawer.vue";
import BootomList from "@/components/BootomList/index.vue";
export default {
  name: "DeepBreathe",
  components: {
    HuXiBall,
    MoXiangText,
    VIcon,
    ShuLingMenuDrawer,
    BootomList,
  },
};
</script>
<script lang="ts" setup>
import { ref, onMounted, reactive } from "vue";
import JcBar from "@/layout/JcBar.vue";
import { BreatheEnum, getStatusColor, setQingCheng, setBaiTian, setYeWan } from "./utils";
import { computed, watch } from "vue";
import { useRouter } from "vue-router";
import { useNow, useDateFormat, useToggle, useInterval } from "@vueuse/core";
import { setPlayerList, playClickAudio } from "@/utils/player";
import AudioList from "@/utils/audio-list/main";
import dayjs from "dayjs";
import duration from "dayjs/plugin/duration";
dayjs.extend(duration);
const router = useRouter();
const moXiangTextRef = ref<{ next: (index?: number) => void; resetText: () => void }>();
const huxiConfig = reactive({
  absorbDuration: 6,
  stopDuration: 0,
  resetDuration: 6,
});
const [drawer, toogleDrawer] = useToggle(false);
const toolpText = ref<BreatheEnum>(BreatheEnum.absorb);
const [isPlay, togglePlay] = useToggle(false);
const [isRenSheng, toggleRenSheng] = useToggle(true);
const { counter, pause, resume } = useInterval(1000, { controls: true, immediate: false });
const formatted = computed(() => {
  return dayjs.duration(counter.value, "seconds").format("HH:mm:ss");
});
const bottomListRef = ref();
const starRef = reactive({
  x: 0,
  drawer: true,
  count: 1,
  wordId: -1,
});

function nextText() {
  moXiangTextRef.value?.next();
}

function resetText() {
  moXiangTextRef.value?.resetText();
}

function onRepeat(count: number) {
  starRef.count = count;
}
function onStart(value: BreatheEnum) {
  toolpText.value = value;
}

function openBottomList() {
  bottomListRef.value?.open();
}

function handlerBootomListClick(_: any, index: number) {
  AudioList.audioList.setCurrentIndex({ index });
  AudioList.audioList.play();
}

/**
 * 设置默想音乐
 */
function setMusic() {
  setPlayerList("7b6bb91a9e4c988eac46363b48dee730", 4, "shiji").then((audio) => {
    audio.audioList.play();
  });
}

onMounted(() => {
  setMusic();
});

watch(isPlay, () => {
  playClickAudio();
  if (!isPlay.value) {
    resetText();
    pause();
  } else {
    resume();
  }
});

watch(
  [() => huxiConfig, () => starRef.wordId],
  () => {
    togglePlay(false);
  },
  { deep: true }
);
</script>
<style lang="scss" scoped></style>
./utils
